<template>
  <div>
    <v-card class="mb-10">
      <v-alert type="info" class="mb-10">
        <div slot="message">
          <div>
            在main.js入口注册 VirtualTree 组件，注册代码：
            <div class="blue-text">
              <div>import VCUTable, { VirtualTree } from "vcu-table";</div>
              <div>Vue.use(VCUTable);</div>
              <div>VCUTable.use(VirtualTree)</div>
            </div>
          </div>
          <div>
            不支持的参数：
            <ul class="red-text">
              <li>table.keep-source</li>
              <li>table.tree-config.line</li>
              <li>table.tree-config.reserve</li>
              <li>table.expand-config</li>
              <li>table.span-method</li>
              <li>table.footer-span-method</li>
              <li>column.type = expand</li>
            </ul>
          </div>
        </div>
      </v-alert>

      <v-alert type="info" class="mb-10">
        <div slot="message">
          <div>
            方法：
            <ul>
              <li>getCheckboxIndeterminateRecords()</li>
              <li>getCheckboxRecords()</li>
              <li>setCheckboxRow(rows, checked)</li>
              <li>toggleCheckboxRow(rows)</li>
              <li>setAllCheckboxRow(checked)</li>
              <li>toggleAllCheckboxRow()</li>
              <li>clearCheckboxRow()</li>
              <li>setAllTreeExpand(expanded)</li>
              <li>setAllTreeExpansion(expanded)</li>
              <li>setTreeExpand(rows, expanded)</li>
              <li>setTreeExpansion(rows, expanded)</li>
              <li>isTreeExpandByRow(row)</li>
              <li>reloadData(data)</li>
              <li>loadData(data)</li>
              <li>getData(rowIndex)</li>
              <li>setCurrentRow(row, change)</li>  
              <li>setActiveRow(row, opts)</li>  
              <li>validate(type)</li>  
              <li>getCurrentRecord()</li>
              <li>getActiveRecord()</li>
            </ul>
          </div>
        </div>
      </v-alert>

      <v-button-group class="mb-10">
        <v-button @click="$refs.xTableTree.setAllTreeExpand(true)">
          展开所有
        </v-button>
        <v-button @click="$refs.xTableTree.setAllTreeExpand(false)">
          收起所有
        </v-button>
        <v-button @click="$refs.xTableTree.setAllCheckboxRow(true)">
          全选
        </v-button>
        <v-button @click="$refs.xTableTree.clearCheckboxRow()">
          取消全选
        </v-button>
        <v-button @click="$refs.xTableTree.toggleAllCheckboxRow()">
          切换全部选中状态
        </v-button>
        <v-button @click="getCheckboxIndeterminateEvent"> 获取半选中 </v-button>
        <v-button @click="getCheckedEvent"> 获取选中 </v-button>
        <v-button @click="setCheckedEvent"> 选中第二条 </v-button>
        <v-button @click="toggleCheckedEvent"> 切换第三条选中状态 </v-button>
      </v-button-group>

      <v-button-group class="mb-10">
        <v-button @click="$refs.xTableTree.removeSelecteds()">
          删除选中
        </v-button>
        <v-button @click="getRemoveRecordsEvent"> 获取删除数据 </v-button>
        <v-button @click="insertEvent"> 插入数据 </v-button>
        <v-button @click="insertAtEvent"> 指定位置插入数据 </v-button>
        <v-button @click="insertAtChildEvent"> 插入子级数据 </v-button>
        <v-button @click="getRecordsetEvent"> 获取数据集 </v-button>
        <v-button @click="scrolltoEvent"> 滚动动指定位置 </v-button>
        <v-button @click="getCurrentRecordEvent"> 获取当前行数据 </v-button>
      </v-button-group>

      <vcu-table-virtual-tree
        border="none"
        row-key
        highlight-current-row
        show-overflow
        :show-header="false"
        :columns="tableColumn"
        :loading="loading"
        ref="xTableTree"
        :height="300"
        :checkbox-config="{
          labelField: 'XMMC00',
          checkField: 'checked',
          halfField: 'indeterminate',
        }"
        :tree-config="{
          children: 'children',
        }"
        :context-menu="tableMenu"
        @cell-click="cellClickEvent"
        @cell-context-menu="cellContextMenuEvent"
        @context-menu-click="contextMenuClickEvent"
        @checkbox-change="checkboxChangeEvent"
        @checkbox-all="checkboxAllEvent"
      >
      </vcu-table-virtual-tree>
    </v-card>
  </div>
</template>
<script>
import XEUtils from "xe-utils";
import treeData from "./response";

export default {
  data() {
    return {
      loading: false,
      tableColumn: [
        { type: "checkbox", title: "", field: "XMMC00", treeNode: true },
      ],
      tableMenu: {
        className: "my-menus",
        header: {
          options: [[{ code: "exportAll", name: "导出所有.csv" }]],
        },
        body: {
          options: [
            [
              {
                code: "details",
                name: "查看详情",
                prefixIcon: "iconfont icon-detail",
                visible: true,
                disabled: false,
              },
            ],
            [
              {
                code: "copy",
                name: "复制",
                prefixIcon: "iconfont icon-file-copy",
                className: "my-copy-item",
              },
            ],
            [
              {
                code: "remove",
                name: "删除",
                prefixIcon: "iconfont icon-delete red-text",
              },
              {
                code: "filter",
                name: "筛选",
                prefixIcon: "iconfont icon-filter",
                children: [
                  { code: "clearFilter", name: "清除筛选" },
                  { code: "filterSelect", name: "按所选单元格的值筛选" },
                ],
              },
              {
                code: "sort",
                name: "排序",
                prefixIcon: "iconfont icon-sort blue-text",
                children: [
                  {
                    code: "clearSort",
                    name: "清除排序",
                    prefixIcon: "iconfont icon-clear",
                  },
                  {
                    code: "sortAsc",
                    name: "升序",
                    prefixIcon: "iconfont icon-sort-descending",
                  },
                  {
                    code: "sortDesc",
                    name: "倒序",
                    prefixIcon: "iconfont icon-sort-ascending",
                  },
                ],
              },
              { code: "print", name: "打印", disabled: true },
            ],
          ],
        },
        footer: {
          options: [[{ code: "clearAll", name: "清空数据" }]],
        },
        visibleMethod: this.visibleMethod,
      },
    };
  },
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$refs.xTableTree.loadData(treeData.payload);
    },
    checkboxAllEvent(params) {
      console.info(params);
    },
    checkboxChangeEvent(params) {
      console.info(params);
    },
    insertEvent() {
      this.$refs.xTableTree.insert([
        {
          XMMC00: "我是插入的数据",
          BH0000: "0000066669999",
          LEVEL: 2121,
          FLAG00: "1111111",
        },
      ]);
    },
    insertAtEvent() {
      const row = this.$refs.xTableTree.getData(2);
      this.$refs.xTableTree.insertAt(
        [
          {
            XMMC00: "我是插入的数据11111",
            BH0000: "0000066669999",
            LEVEL: 2121,
            FLAG00: "1111111",
          },
        ],
        row
      );
    },
    insertAtChildEvent() {
      const row = this.$refs.xTableTree.getData(2);
      this.$refs.xTableTree.insertAtChild(
        [
          {
            XMMC00: "我是插入的子级数据-----",
            BH0000: "000006666999119",
            LEVEL: 21121,
            FLAG00: "11211111",
          },
        ],
        row
      );
    },
    getRecordsetEvent() {
      const res = this.$refs.xTableTree.getRecordset();
      console.info(res);
    },
    getCheckedEvent() {
      const selectRow = this.$refs.xTableTree.getCheckboxRecords();
      console.info(selectRow);
    },
    getCheckboxIndeterminateEvent() {
      const selectRow = this.$refs.xTableTree.getCheckboxIndeterminateRecords();
      console.info(selectRow);
    },
    setCheckedEvent() {
      const row = this.$refs.xTableTree.getData(1);
      this.$refs.xTableTree.setCheckboxRow(row, true);
    },
    getRemoveRecordsEvent() {
      console.info(this.$refs.xTableTree.getRemoveRecords());
    },
    toggleCheckedEvent() {
      const row = this.$refs.xTableTree.getData(2);
      this.$refs.xTableTree.toggleCheckboxRow([row]);
    },
    cellClickEvent({ row }) {
      console.log(`单元格点击: ${row.XMMC00}`);
      this.$refs.xTableTree.insertAtChild(
        [
          {
            XMMC00: `我是插入的子级数据-----${Math.random()}`,
            BH0000: "000006666999119",
            LEVEL: 21121,
            FLAG00: "11211111",
          },
        ],
        row
      );
    },
    cellContextMenuEvent({ row }) {
      this.$refs.xTableTree.setCurrentRow(row);
    },
    contextMenuClickEvent({ menu, row, column }) {
      switch (menu.code) {
        case "copy":
          // 示例
          if (row && column) {
            if (XEClipboard.copy(row[column.property])) {
              this.$success({
                title: "提示",
                content: "已复制到剪贴板！",
              });
            }
          }
          break;
        default:
          this.$message.info(`点击了 ${menu.name} 选项`);
      }
    },
    scrolltoEvent() {
      this.$refs.xTableTree.setAllTreeExpand(true).then(() => {
        this.$refs.xTableTree.scrollToCondition((row) => {
          if(row._VCUID == "row_27"){
            this.$refs.xTableTree.setCurrentRow(row);
            return true
          }
          return false; 
        });
      });
    },
    getCurrentRecordEvent(){
      console.info(this.$refs.xTableTree.getCurrentRecord())
    }
  },
};
</script>

<style lang="less" scoped>
</style>